<template>
  <div>
    <div v-if="show">
      <el-empty description=" "
                :image-size="450"
                image="https://yangxiong001.oss-cn-hangzhou.aliyuncs.com/photo/%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE.png">
        <div style="color: firebrick; font-size: 20px">暂无数据</div>
      </el-empty>
    </div>
    <div v-else-if="collectBook.length !== 0">
      <div class="hea">收藏列表如下：</div>
      <div class="main">
        <div class="d" v-for="book in collectBook" :key="book.id" @click="getDetail(book)">
          <el-row :gutter="24">
            <el-col :span="3">
              <img class="imgList" :src="book.url" alt="暂无图片"/>
            </el-col>
            <el-col :span="21" class="list">
              <div>
                <span>书名：</span>{{ book.name }}
              </div>
              <div>
                <span>作者：</span>{{ book.author }}
              </div>
              <div>
                <span>分类：</span>{{ book.kind }}
              </div>
              <div>
                <span>最新章节：</span>{{ book.lastChapter }}
              </div>
              <div>
                <span>状态：</span>{{ book.status }}
              </div>
              <el-row>
                <el-col :span="3"><span>简介：</span></el-col>
                <el-col :span="21" class="intro"> {{ book.introduction }}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "collect",
  data() {
    return {
      userName: '',
      collectBook: [],
      show: false,
    }
  },
  created() {
    let query = this.$route.query;
    this.userName = query.userName;
    this.getBookByUserName();
  },
  methods: {
    getDetail(book) {
      this.$router.push({path: "/book/detail", query: {id: book.id}})
    },
    getBookByUserName() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/book-collect/list", {
          userName: this.userName
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.collectBook = res.data.data;
            this.show = this.collectBook.length === 0;
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.imgList {
  width: 95px;
  height: 120px;
  margin-top: 23px;
  margin-left: 15px;
}

.intro {
  margin-left: -53px;
}

span {
  margin-left: 10px;
  color: #000;
  font-weight: 666;
  font-family: "Arial Black";
  margin-right: 5px;
}

main {
  margin-top: 20px;
}

.d {
  background-color: #EEEEEE;
  margin-top: 15px;
  border: #999 solid 1px;
  border-radius: 6px;
}

.list {
  color: #669fff;
  line-height: 23px;
}

.hea {
  text-align: center;
  margin-top: 20px;
  font-family: "Microsoft YaHei UI";
  font-size: 24px;
  font-weight: 777;
}
</style>
